<style lang="scss" scoped>
@import '../../style/mixin-rem.scss';
.book-search-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: rem(16px) rem(40px) 0 rem(40px);
  .btn_back {
    padding: rem(20px) rem(10px) rem(20px) 0;
  }
  .search_box {
    width: 100%;
    height: rem(56px);
    outline: none;
    border: none;
    font-size: rem(24px);
    color: #42464e;
  }
  .iconfont {
    font-size: rem(28px);
    color: #42464e;
  }
}
</style>

<template>
  <div class="book-search-box">
    <router-link class="btn_back"
      tag="div"
      to="/"
    >
      <div class="iconfont icon-fanhui"></div>
    </router-link>
    <input class="search_box"
      type="text"
      placeholder="输入书名后搜索"
      v-model="searchValue"
    >
    <div class="iconfont icon-sousuo"
      @click="getSearchResults"
    >
    </div>
  </div>
</template>

<script>
export default {
  name: 'BookSearchBox',
  data () {
    return {
      searchValue: ''
    }
  },
  methods: {
    getSearchResults () {
      this.$store.dispatch('bookSearch/getSearchResults', this.searchValue)
      this.searchValue = ''
    }
  }
}
</script>
